<template>
    <div class="createdApi">
      <div class="createdApiHeader">
        <span class="returnBtn" @click="returnFun"><i class="el-icon-back"></i> 返回API列表</span>
        <span style="display: inline-block;color:#d9d9d9;margin: 0 8px;vertical-align: middle;">|</span>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="saveApi">保存</el-button>
        <!--<el-dropdown class="btnItem" size="small" split-button type="primary" @click="handleClickAddAPI" @command="handleCommandAdd">-->
          <!--<i class="el-icon-plus"></i><span style="display: inline-block;margin-left: 10px;" @click="saveApi">保存</span>-->
          <!--<el-dropdown-menu slot="dropdown">-->
            <!--<el-dropdown-item command="handleClickAddApi">保存API</el-dropdown-item>-->
            <!--<el-dropdown-item command="handleClickExport">保存并继续新建API</el-dropdown-item>-->
          <!--</el-dropdown-menu>-->
        <!--</el-dropdown>-->
      </div>
      <div class="createdApiContent">
        <el-tabs type="border-card">
          <el-tab-pane label="api描述">
            <apiDescribe ref="apiDescribeDom"></apiDescribe>
          </el-tab-pane>
          <el-tab-pane label="返回示例">
            <returnExample ref="returnExampleDom"></returnExample>
          </el-tab-pane>
          <el-tab-pane label="额外说明">
            <additionalInstruct ref="additionalInstructDom"></additionalInstruct>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
</template>

<script>
  import apiDescribe from './addApicontent/apiDescribe'
  import returnExample from './addApicontent/returnExample'
  import additionalInstruct from './addApicontent/additionalInstruct'
  import {
    addApiItem
  } from '@/api/apiModel/api.js'
  export default {
    name: 'addApiPage',
    components: {
      apiDescribe,
      returnExample,
      additionalInstruct
    },
    methods: {
      saveApi() {
        console.log(this.$refs.additionalInstructDom)
        const getListData = this.$refs.apiDescribeDom.getApiData()
        getListData.tags = getListData.tags.toString()
        const getListDataDialog = this.$refs.returnExampleDom.getDialogMsg()
        const getListDataItionalInstruct = { note: this.$refs.additionalInstructDom.$data.itionalContent }
        addApiItem(Object.assign(getListData, getListDataDialog, getListDataItionalInstruct)).then(res => {
          console.log(res)
          this.$message({
            message: '新建成功',
            type: 'success'
          })
          this.$router.push({
            name: 'apiManage',
            query: { projectId: this.$store.state.user.projectId }
          })
        }).catch((err) => {
          this.$message.error('新建失败')
          this.$router.push({
            name: 'apiManage',
            query: { projectId: this.$store.state.user.projectId }
          })
        })
        console.log(getListData)
      },
      handleClickAddAPI() {

      },
      handleCommandAdd() {

      },
      returnFun() {
        this.$router.push({
          name: 'projectApi',
          query: { projectId: this.$store.state.user.projectId }
        })
      }
    }
  }
</script>

<style scoped>
  .returnBtn:hover{
    color: #409EFF;
  }
</style>
